{{#createDetailsElement
    'report-collection'
    ''
    screenshotArray.length
    isOpenByDefault
    collectionType
}}
  <summary class="report-collection__heading">
    {{#createCheckboxElement
        'report-collection__checkbox'
        'report-collection__checkbox--hidden'
        screenshotArray.length
        showApprovalControls
        collectionType
    }}{{/createCheckboxElement}}
    <span class="report-collection__heading-content">
      {{formatNumber screenshotArray.length}}
      <strong>{{heading}}</strong>
      {{#createApprovalStatusElement
          'report-review-status report-review-status--collection'
          'report-review-status--hidden'
          screenshotArray.length
          showApprovalControls
          collectionType
      }}{{/createApprovalStatusElement}}
    </span>
  </summary>
  <div class="report-collection__content">
    {{#if screenshotArray.length}}
      {{#forEachTestPage screenshotPageMap}}
        {{#createDetailsElement
            'report-html-file'
            ''
            screenshot_array.length
            true
            ../collectionType
            html_file_path
        }}
          <summary class="report-html-file__heading">
            {{#createCheckboxElement
                'report-html-file__checkbox'
                'report-html-file__checkbox--hidden'
                screenshot_array.length
                ../showApprovalControls
                ../collectionType
                html_file_path
            }}{{/createCheckboxElement}}
            <strong>{{formatNumber screenshot_array.length}}</strong>
            in
            <span class="report-html-file__heading-content">
              <strong>{{html_file_path}}</strong>
              {{getHtmlFileLinks}}
              {{#createApprovalStatusElement
                  'report-review-status report-review-status--html-file'
                  'report-review-status--hidden'
                  screenshot_array.length
                  ../showApprovalControls
                  ../collectionType
                  html_file_path
              }}{{/createApprovalStatusElement}}
            </span>
          </summary>
          <div class="report-html-file__content">
            {{#each screenshot_array}}
              {{#createDetailsElement
                  'report-user-agent'
                  ''
                  ../screenshot_array.length
                  true
                  ../../collectionType
                  ../html_file_path
                  user_agent.alias
              }}
                <summary class="report-user-agent__heading">
                  {{#createCheckboxElement
                      'report-user-agent__checkbox'
                      'report-user-agent__checkbox--hidden'
                      1
                      ../../showApprovalControls
                      ../../collectionType
                      ../html_file_path
                      user_agent.alias
                  }}{{/createCheckboxElement}}
                  <img src="{{user_agent.browser_icon_url}}"
                       width="16" height="16"
                       class="report-user-agent__icon"
                       title="{{user_agent.navigator.browser_name}}">
                  <span class="report-user-agent__heading-content">
                    <strong>{{user_agent.alias}}</strong>
                    {{#if user_agent.navigator.browser_name}}
                      (
                        {{~user_agent.navigator.browser_name}} {{user_agent.navigator.browser_version}}
                        on
                        {{user_agent.navigator.os_name}} {{user_agent.navigator.os_version~}}
                      )
                    {{/if}}
                    {{#createApprovalStatusElement
                        'report-review-status report-review-status--user-agent'
                        'report-review-status--hidden'
                        1
                        ../../showApprovalControls
                        ../../collectionType
                        ../html_file_path
                        user_agent.alias
                    }}{{/createApprovalStatusElement}}
                    <a href="#{{../html_file_path}}:{{user_agent.alias}}"
                       id="{{../html_file_path}}:{{user_agent.alias}}"
                       class="report-user-agent__deeplink">#</a>
                  </span>
                </summary>
                <div class="report-user-agent__content">
                  <div class="report-user-agent__image-cell">
                    <div class="report-user-agent__image-heading">
                      <span class="report-user-agent__image-type"
                            title="Previously-approved screenshot">Golden</span>:
                      <div class="report-user-agent__image-dimensions">
                        {{#if diff_image_result.expected_image_dimensions.width}}
                          {{~diff_image_result.expected_image_dimensions.width~}}
                          x
                          {{~diff_image_result.expected_image_dimensions.height~}}
                        {{/if}}
                      </div>
                    </div>
                    <div class="report-user-agent__image-content">
                      {{> image expected_image_file}}
                    </div>
                  </div>
                  <div class="report-user-agent__image-cell">
                    <div class="report-user-agent__image-heading">
                      <span class="report-user-agent__image-type"
                            title="Pixels that changed (shown in pink)">Diff</span>:
                      {{#if diff_image_result.changed_pixel_count}}
                        <strong>{{formatNumber diff_image_result.changed_pixel_count}}</strong>
                        pixels changed
                        ({{diff_image_result.changed_pixel_percentage}}%)
                      {{/if}}
                      <div class="report-user-agent__image-dimensions">
                        {{#if diff_image_file.public_url}}
                          {{~diff_image_result.diff_image_dimensions.width~}}
                          x
                          {{~diff_image_result.diff_image_dimensions.height~}}
                        {{/if}}
                      </div>
                    </div>
                    <div class="report-user-agent__image-content">
                      {{#if diff_image_file.public_url}}
                        {{#if diff_image_result.changed_pixel_count}}
                          {{> image diff_image_file}}
                        {{else}}
                          (none)
                        {{/if}}
                      {{else}}
                        (none)
                      {{/if}}
                    </div>
                  </div>
                  <div class="report-user-agent__image-cell">
                    <div class="report-user-agent__image-heading">
                      <span class="report-user-agent__image-type"
                            title="Freshly-captured screenshot">Snapshot</span>:
                      <div class="report-user-agent__image-dimensions">
                        {{#if diff_image_file.public_url}}
                          {{~diff_image_result.actual_image_dimensions.width~}}
                          x
                          {{~diff_image_result.actual_image_dimensions.height~}}
                        {{else}}
                          {{#if diff_image_result.actual_image_dimensions.width}}
                            {{~diff_image_result.actual_image_dimensions.width~}}
                            x
                            {{~diff_image_result.actual_image_dimensions.height~}}
                          {{/if}}
                        {{/if}}
                      </div>
                    </div>
                    <div class="report-user-agent__image-content">
                      {{#if diff_image_file.public_url}}
                        {{#if diff_image_result.changed_pixel_count}}
                          {{> image actual_image_file}}
                        {{else}}
                          (identical)
                        {{/if}}
                      {{else}}
                        {{> image actual_image_file}}
                      {{/if}}
                    </div>
                  </div>
                </div>
              {{/createDetailsElement}}
            {{/each}}
          </div>
        {{/createDetailsElement}}
      {{/forEachTestPage}}
    {{else}}
      <div class="report-congrats">Woohoo! 🎉</div>
    {{/if}}
  </div>
{{/createDetailsElement}}
